<template>
  <div>
    <el-dialog
      :model-value="localisVisible"
      :title="friendMessage.username + '的个人信息'"
      width="800"
      draggable
      @update:model-value="updateLocalVisible"
    >
      <div class="friendDialogBox">
        <div class="friendMessage">
          <el-avatar
            :src="friendMessage.avatar"
            style="height: 100px; width: 100px; margin-bottom: 10px"
          />
          <span style="width: 80%; border-bottom: 2px dashed #aaa">
            {{
              friendMessage.sign == "" || friendMessage.sign == null
                ? "高冷的人都不会设置个性签名"
                : friendMessage.sign
            }}
          </span>
          <div class="friendMessageContext">
            <div class="friendMessageItem">
              <div class="friendMessageItemContext">
                <el-popover
                  placement="top-start"
                  :width="100"
                  trigger="hover"
                  content="总点赞数"
                >
                  <template #reference>
                    <img src="@/assets/icon/xihuan.png" alt="" />
                  </template>
                </el-popover>
                <span>{{ friendMessage.praise }}</span>
              </div>
              <div class="friendMessageItemContext">
                <el-popover
                  placement="top-start"
                  :width="100"
                  trigger="hover"
                  content="关注数"
                >
                  <template #reference>
                    <img src="@/assets/icon/wodeguanzhu.png" alt="" />
                  </template>
                </el-popover>
                <span>{{ friendMessage.concern }}</span>
              </div>
              <div class="friendMessageItemContext">
                <el-popover
                  placement="top-start"
                  :width="100"
                  trigger="hover"
                  content="粉丝数"
                >
                  <template #reference>
                    <img src="@/assets/icon/wodefensi.png" alt="" />
                  </template>
                </el-popover>
                <span>{{ friendMessage.fans }}</span>
              </div>
            </div>
            <div class="friendMessageItem">
              <div class="friendMessageItemContext">
                <img src="@/assets/icon/id.png" alt="" />
                <span>{{ friendMessage.izzeCode }}</span>
              </div>
              <div class="friendMessageItemContext">
                <img src="@/assets/icon/phone.png" alt="" />
                <span>{{ friendMessage.phone }}</span>
              </div>
            </div>
            <div class="friendMessageItem">
              <div class="friendMessageItemContext">
                <img src="@/assets/icon/school.png" alt="" />
                <span>{{ friendMessage.school }}</span>
              </div>
              <div class="friendMessageItemContext">
                <img src="@/assets/icon/location.png" alt="" />
                <span>{{ friendMessage.location }}</span>
              </div>
            </div>
            <div class="friendMessageItem">
              <div class="friendMessageItemContext">
                <img src="@/assets/icon/birthday.png" alt="" />
                <span>{{ friendMessage.birthday }}</span>
              </div>
              <div class="friendMessageItemContext">
                <img src="@/assets/icon/join-date.png" alt="" />
                <span>{{ friendMessage.createTime }}</span>
              </div>
            </div>
            <div class="friendMessageItem">
              <div class="friendMessageItemContext">
                <img
                  style="margin-right: 2px"
                  src="@/assets/icon/email.png"
                  alt=""
                />
                <span>{{ friendMessage.email }}</span>
              </div>
            </div>
          </div>
          <el-button
            style="margin-top: 20px"
            @click="isConcern(friendMessage)"
            v-if="isFriend == 3"
            >关注</el-button
          >
          <el-button style="margin-top: 20px" v-if="isFriend == 2"
            >对方已关注你</el-button
          >
          <el-button style="margin-top: 20px" v-if="isFriend == 1"
            >已关注</el-button
          >
          <el-button style="margin-top: 20px" v-if="isFriend == 0"
            >互相关注</el-button
          >

          <el-button style="margin-top: 20px" v-if="isFriend == -1"
            >这是自己</el-button
          >
        </div>
        <div class="chat"></div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { number } from "echarts";
import { ref, watch } from "vue";

// 发出事件更新 isVisible
const props = defineProps({
  friendMessage: {
    type: Object,
    default: () => [],
  },
  isVisible: {
    type: Boolean,
    default: false,
  },
  isFriend: number,
});

const localisVisible = ref(props.isVisible);

const emit = defineEmits(["update:isVisible"]);

function updateLocalVisible(value) {
  localisVisible.value = value;
  emit("update:isVisible", value);
}
watch(
  () => props.isVisible,
  (newVal) => {
    localisVisible.value = newVal;
  }
);
</script>

<style lang="scss" scoped>
.friendDialogBox {
  width: 100%;
  height: 500px;
  display: flex;
  justify-content: center;

  .friendMessage {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 30%;
    margin-right: 5px;

    .friendMessageContext {
      width: 80%;
      margin-top: 30px;
      border-bottom: 2px dashed #eee;

      .friendMessageItem {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 10px;

        .friendMessageItemContext {
          img {
            height: 13px;
          }

          display: flex;
          align-items: center;
        }

        span {
          font-size: 12px;
          margin-right: 2px;
          margin-left: 2px;
        }
      }
    }
  }

  .chat {
    width: 65%;
    background-color: #eee;
  }
}
</style>
